<template>
  <div
    class="shell"
    @mouseenter="expand = true"
    @mouseleave="expand = false"
    :style="{ width: expand ? '180px' : '60px' }"
  >
    <ul class="nav">
      <li :class="['active', 'logo-li']" id="logo">
        <a href="#" class="logo-container">
          <span class="logo-icon">
            <el-icon :size="18"><Menu /></el-icon>
          </span>
          <span class="logo-text" :class="{ 'hidden': !expand }">导航栏</span>
        </a>
      </li>
      <li v-for="item in menu" :key="item.name" :class="{ active: isActive(item) }" @click="handleClick(item)">
        <a href="javascript:void(0)" class="menu-item">
          <span class="menu-icon">
            <el-icon :size="18"><component :is="item.icon" /></el-icon>
          </span>
          <span class="text" :class="{ 'hidden': !expand }">{{ item.text }}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { User, HomeFilled, Goods, Box, Van, List, Setting, Menu } from '@element-plus/icons-vue'
import '@/assets/styles/navigation.css'

const props = defineProps({
  role: {
    type: String,
    required: true
  }
})

const router = useRouter()
const route = useRoute()
const expand = ref(false)

// 监听展开状态变化，通知父组件
watch(expand, (newVal) => {
  document.documentElement.style.setProperty('--nav-width', newVal ? '180px' : '60px')
})

onMounted(() => {
  // 初始化CSS变量
  document.documentElement.style.setProperty('--nav-width', '60px')
})

// 菜单项图标映射（Element Plus 图标组件）
const iconMap = {
  dashboard: HomeFilled,
  products: Goods,
  orders: Box,
  delivery: Van,
  users: User,
  profile: Setting,
  'product-management': Goods,
  'sales-report': List,
  tasks: Van,
  staff: User,
}

const menu = computed(() => {
  switch (props.role) {
    case 'admin':
      return [
        { name: 'dashboard', text: '首页', icon: iconMap.dashboard, path: '/admin/dashboard' },
        { name: 'products', text: '商品管理', icon: iconMap.products, path: '/admin/products' },
        { name: 'orders', text: '订单管理', icon: iconMap.orders, path: '/admin/orders' },
        { name: 'delivery', text: '配送管理', icon: iconMap.delivery, path: '/admin/delivery' },
        { name: 'users', text: '用户管理', icon: iconMap.users, path: '/admin/users' },
        { name: 'profile', text: '个人信息', icon: iconMap.profile, path: '/admin/profile' },
      ]
    case 'deliveryman':
      return [
        { name: 'dashboard', text: '首页', icon: iconMap.dashboard, path: '/deliveryman/dashboard' },
        { name: 'tasks', text: '配送任务', icon: iconMap.tasks, path: '/deliveryman/tasks' },
        { name: 'profile', text: '个人信息', icon: iconMap.profile, path: '/deliveryman/profile' },
      ]
    case 'salesman':
      return [
        { name: 'dashboard', text: '首页', icon: iconMap.dashboard, path: '/salesman/dashboard' },
        { name: 'product-management', text: '价格管理', icon: iconMap['product-management'], path: '/salesman/product-management' },
        { name: 'sales-report', text: '销售报告', icon: iconMap['sales-report'], path: '/salesman/sales-report' },
        { name: 'profile', text: '个人信息', icon: iconMap.profile, path: '/salesman/profile' },
      ]
    case 'purchaser':
      return [
        { name: 'dashboard', text: '首页', icon: iconMap.dashboard, path: '/purchaser/dashboard' },
        { name: 'products', text: '产品管理', icon: iconMap.products, path: '/purchaser/products' },
        { name: 'orders', text: '采购订单', icon: iconMap.orders, path: '/purchaser/orders' },
        { name: 'profile', text: '个人信息', icon: iconMap.profile, path: '/purchaser/profile' },
      ]
    case 'delivery_admin':
      return [
        { name: 'dashboard', text: '首页', icon: iconMap.dashboard, path: '/delivery_admin/dashboard' },
        { name: 'tasks', text: '任务管理', icon: iconMap.tasks, path: '/delivery_admin/tasks' },
        { name: 'staff', text: '配送员管理', icon: iconMap.staff, path: '/delivery_admin/staff' },
        { name: 'profile', text: '个人信息', icon: iconMap.profile, path: '/delivery_admin/profile' },
      ]
    default:
      return []
  }
})

function handleClick(item) {
  if (item.path) {
    router.push(item.path)
  }
}

function isActive(item) {
  return route.path.startsWith(item.path)
}
</script>

<style scoped>
.with-navigation {
  display: flex;
  min-height: 100vh;
}
.main-content {
  flex: 1;
  margin-left: var(--nav-width, 60px);
  transition: margin-left 0.4s;
}
.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.shell {
  position: fixed;
  width: 60px;
  height: 100%;
  background: rgba(56, 142, 60, 0.5);
  z-index: 9999;
  transition: width 0.25s ease-out;
  padding-left: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  will-change: width;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.logo-li {
  height: 60px;
  display: flex;
  align-items: center;
  padding-left: 4px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.logo-container {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  padding: 0 10px;
  width: 100%;
  justify-content: flex-start;
}
.logo-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.85) !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 10px !important;
}
.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: all 0.25s ease-out;
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  height: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  margin-top: 10px !important;
  transform: translateZ(0);
}
.menu-item {
  display: flex;
  align-items: center;
  height: 40px;
  text-decoration: none;
  padding: 0 10px;
  width: 100%;
}
.menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  margin-right: 8px;
  flex-shrink: 0;
}
.text {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.25s ease-out;
  transform: translateZ(0);
}
.hidden {
  opacity: 0;
  width: 0;
  overflow: hidden;
}
/* 添加新的样式，用于收起状态下的居中显示 */
.shell:not(:hover) .logo-container {
  justify-content: center;
}
.shell:not(:hover) .logo-icon {
  margin-right: 0 !important;
}
</style> 